<template>
  <div>
    <v-stage
      :class="['stage-left', { isHide: !showLeft }]"
      ref="stageLeft"
      :config="stageLeftSize"
    >
      <v-layer ref="layerLeft">
        
      </v-layer>
    </v-stage>

    <div :class="['container-right', { content: !showLeft }]">
      <div class="opr-header">
        <div>
          <span @click="hideLeft">《</span>
        </div>
        <div>
          <span>id: {{ selectNode.id }}</span>
        </div>
        <div>
          <span>x: </span><input type="number" v-model.number="selectNode.x" />
        </div>
        <div>
          <span>y: </span><input type="number" v-model.number="selectNode.y" />
        </div>
        <div>
          <span>width: </span
          ><input type="number" v-model.number="selectNode.width" />
        </div>
        <div>
          <span>height: </span
          ><input type="number" v-model.number="selectNode.height" />
        </div>
        <div><span>text: </span><input v-model="selectNode.text" /></div>
        <div>
          <span>lineWidth: </span
          ><input type="number" v-model.number="selectNode.lineWidth" />
        </div>
        <div>
          <span>rotation: </span
          ><input type="number" v-model.number="selectNode.rotation" />
        </div>
        <div><button @click="delNode(selectNode.id)">删除</button></div>
        <div><button @click="save()">保存</button></div>
      </div>
      <v-stage
        id="container"
        class="stage-right"
        ref="stage"
        :config="stageSize"
      >
        <v-layer ref="layer">
          <div v-for="(item, index) in layerList" :key="index">
           
          </div>
        </v-layer>
      </v-stage>
    </div>
  </div>
</template>

<script>
const width = window.innerWidth
const height = window.innerHeight

export default {
  components: {
   
  },
  data() {
    return {
      stageLeftSize: {
        width: 300,
        height: height,
      },
      stageSize: {
        container: 'container',
        width: 1840,
        height: 809,
      },
      layerList: [
       
      ],
      selectNode: {},
      showLeft: false,
    }
  },

  created() {},
  methods: {
    clickNode(val, item) {

    },
    mouseMove(val, index) {
      this.layerList[index].x = val.x
      this.layerList[index].y = val.y
      this.selectNode = this.layerList[index]
    },
    delNode(id) {
      this.layerList.forEach((item, index) => {
        if (item.id === id) {
          this.layerList.splice(index, 1)
        }
      })
    },
    save() {
      console.log(this.layerList)
    },

    hideLeft() {
      this.showLeft = !this.showLeft
    },
  },
}
</script>

<style lang="scss" scoped>
.isHide {
  display: none;
}
.stage-left {
  position: absolute;
  top: 0;
  left: 0;
  background: #050d32;
}
.content {
  margin-left: 0px !important;
}
.container-right {
  margin-left: 300px;

  .opr-header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background: #eceff7;

    input {
      width: 120px;
    }
  }

  .stage-right {
    margin: 10px;
    width: 1840px;
    background: #050d32;
  }
}
</style>
